<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>订单列表</title>
<#include "../common/header.ftl"/>
<script type="text/javascript" src="/js/plugins/jquery.form.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.twbsPagination.min.js"></script>

<script type="text/javascript">
	$(function(){

        $(".editClass").click(function(){
            $("#myModal").modal("show");
            var data=$(this).data("json");
            $("#myModal [name=id]").val(data.id);
            $("#myModal [name=consignee]").val(data.consignee);
            $("#myModal [name=province]").val(data.province);
            $("#myModal [name=city]").val(data.city);
            $("#myModal [name=district]").val(data.district);
            $("#myModal [name=address]").val(data.address);
            $("#myModal [name=zipcode]").val(data.zipcode);
            $("#myModal [name=mobile]").val(data.mobile);
        });

        $(".btn_audit").click(function(){
            var form=$("#editform");
            $("#myModal").modal("hide");
            form.ajaxSubmit(function(data){
                if(data.success){
                    $.messager.confirm("提示","保存成功!",function(){
                        window.location.reload();
                    });
                }
            });
            return false;
        });

        $(".btn_action").click(function(){
            var state = $(this).val();
            console.log(state);
            var form=$("#orderAction");
            form.find("[name=state]").val($(this).val());
            if (state == 1){
                $.messager.confirm("提示","你确定要确认订单吗?", function(){
                    form.ajaxSubmit(function(data){
                        if(data.success){
                            $.messager.confirm("提示","操作成功!",function(){
                                window.location.href = "/orderinfo/orderDerdetail?orderId=${orderDerdetail.id}";
                            });
                        }
                    });
                })
            }else if (state == 2){
                $.messager.confirm("提示","你确定要取消订单吗?", function(){
                    $.messager.confirm("提示","你确定要取消订单吗?", function(){
                        form.ajaxSubmit(function(data){
                            if(data.success){
                                $.messager.confirm("提示","操作成功!",function(){
                                    window.location.href = "/orderinfo/orderDerdetail?orderId=${orderDerdetail.id}";
                                });
                            }
                        });
                    })
                })
            }else if (state == 3){
                $.messager.confirm("提示","你确定要把订单状态改为无效吗?", function(){
                    form.ajaxSubmit(function(data){
                        if(data.success){
                            $.messager.confirm("提示","操作成功!",function(){
                                window.location.href = "/orderinfo/orderDerdetail?orderId=${orderDerdetail.id}";
                            });
                        }
                    });
                })
            }else if (state == 4){
                deliverSn = $("#deliverSn").val();
                if($.trim(deliverSn).length == 0){
                    $.messager.alert("提示","发货单号不能为空！");
                    return;
                }
                $.messager.confirm("提示","你确定要发货吗?",function(){
                    form.ajaxSubmit(function(data){
                        if(data.success){
                            $.messager.confirm("提示","操作成功!",function(){
                                window.location.href = "/orderinfo/orderDerdetail?orderId=${orderDerdetail.id}";
                            });
                        }
                    });
                })
            }else if (state == 5){
                $.messager.confirm("提示","你确定要配送吗?", function(){
                    form.ajaxSubmit(function(data){
                        if(data.success){
                            $.messager.confirm("提示","操作成功!",function(){
                                window.location.href = "/orderinfo/orderDerdetail?orderId=${orderDerdetail.id}";
                            });
                        }
                    });
                })
            }else if (state == 6){
                $.messager.confirm("提示","你确定要售后吗?", function(){
                    form.ajaxSubmit(function(data){
                        if(data.success){
                            $.messager.confirm("提示","操作成功!",function(){
                                window.location.href = "/orderinfo/orderDerdetail?orderId=${orderDerdetail.id}";
                            });
                        }
                    });
                })
            }
        });
        //商品编辑
        $("#productEdit").click(function () {
            $("#productEditform")[0].reset();
            var data = $(this).data("json");
            $("#productModal [name=id]").val(data);

            //计算商品合计
            var totalPrice = 0;//用于累加 小计的和
            var trs = $("#edit_body tr").size();
            console.log(trs);
            //循环遍历tr数组，获取每一个tr
            for (var i = 0; i < trs; i++) {
                var number = document.getElementById("number" + i).value;
                var price = document.getElementById("price" + i).value;
                var smallTotal = number * price;
                totalPrice = (totalPrice + smallTotal);
            }
            //为 id=sum的td 赋值
            document.getElementById("total").innerHTML = parseFloat(totalPrice).toFixed(2);

            $("#productModal").modal("show");
        });
        //提交
        $(".btn_audit_product").click(function () {
            $("#productModal").modal("hide");
            $("#productEditform").ajaxSubmit(function (data) {
                if (data.success) {
                    $.messager.confirm("提示", "操作成功!", function () {
                        window.location.reload();
                    });
                }
            });
            return false;
        });
        //为金额与数量绑定change事件,并计算金额小计
        $("[tag=productPrice],[tag=productNumber]").change(function () {
            var currentTr = $(this).closest("tr");
            //得到两个元素的值
            var productPrice = currentTr.find("[tag=productPrice]").val();
            var productNumber = currentTr.find("[tag=productNumber]").val();
            //设置金额小计
            if (productPrice && productNumber) {
                //转换成小数类型
                productPrice = parseFloat(productPrice);
                productNumber = parseFloat(productNumber);

                currentTr.find("[tag=amount]").html((productPrice * productNumber).toFixed(2));
            }
            //计算商品合计
            var totalPrice = 0;//用于累加 小计的和
            var trs = $("#edit_body tr").size();
            //循环遍历tr数组，获取每一个tr
            for (var i = 0; i < trs; i++) {
                var number = document.getElementById("number" + i).value;
                var price = document.getElementById("price" + i).value;
                var smallTotal = number * price;
                totalPrice = (totalPrice + smallTotal);
            }
            //为 id=sum的td 赋值
            document.getElementById("total").innerHTML = parseFloat(totalPrice).toFixed(2);
        });
        //返回
        $(".back").click(function(){
            window.location.href = "/orderinfo/orderInfolist";
        })
	});
</script>
</head>
<body>
	<div class="container">
		<#--<#include "../common/top.ftl"/>-->
		<div class="row">
			<#--<div class="col-sm-3">
				<#assign currentMenu="userFileAuth" />
				<#include "../common/menu.ftl" />
			</div>-->
			<div class="col-sm-9">
				<div class="page-header">
					<h3>订单列表</h3>
				</div>
				<div class="panel panel-default">
                    <button type="button" class="btn btn-success back">返回</button>
					<table class="table">
						<tr><th colspan="4" class="text-center info">基本信息</th></tr>
						<tr>
							<th class="text-right">订单号:</th>
							<td class="text-left">${orderDerdetail.orderSn}</td>
							<th class="text-right">订单状态:</th>
							<td class="text-left">${orderDerdetail.orderStatusDisplay},${orderDerdetail.payStatusDisplay},${orderDerdetail.shippingStatusDisplay}</td>
						</tr>
						<tr>
							<th class="text-right">购货人:</th>
							<td class="text-left">${orderDerdetail.consignee}</td>
							<th class="text-right">下单时间:</th>
							<td class="text-left">${(orderDerdetail.orderTime?string('yyyy-MM-dd HH:mm:ss'))!""}</td>
						</tr>
                        <tr>
                            <th class="text-right">发货单号:</th>
                            <td class="text-left">${orderDerdetail.deliverSn!"未发货"}</td>
                            <th class="text-right">付款时间:</th>
                            <td class="text-left">${(orderDerdetail.payTime?string('yyyy-MM-dd HH:mm:ss'))!""}</td>
                        </tr>
                        <tr>
                            <th class="text-right">配送方式:</th>
                            <td class="text-left">默认快递</td>
                            <th class="text-right">发货时间:</th>
                            <td class="text-left">${(orderDerdetail.sendTime?string('yyyy-MM-dd HH:mm:ss'))!""}</td>
                        </tr>
					</table>
				</div>
                <div class="panel panel-default">
                    <table class="table">
                        <tr><th colspan="4" class="text-center info">收货人信息&nbsp;&nbsp;<a href="javascript:void(-1);" class="editClass" data-json='${orderDerdetail.jsonString}'>编辑</a></th></tr>
                        <tr>
                            <th class="text-right">收货人:</th>
                            <td class="text-left">${orderDerdetail.consignee}</td>
                            <th class="text-right">手机:</th>
                            <td class="text-left">${orderDerdetail.mobile}</td>
                        </tr>
                        <tr>
                            <th class="text-right">地址:</th>
                            <td class="text-left">${orderDerdetail.province}${orderDerdetail.city}${orderDerdetail.district}${orderDerdetail.address}</td>
                            <th class="text-right">邮编:</th>
                            <td class="text-left">${orderDerdetail.zipcode}</td>
                        </tr>
                    </table>
                </div>
                <div class="panel panel-default">
                    <table class="table">
                        <tr><th colspan="5" class="text-center info">商品信息&nbsp;&nbsp;<a href="javascript:void(-1);" id="productEdit" class="" data-json='${(orderDerdetail.id)!''}'>编辑</a></th></tr>
                        <tr>
                            <th>商品名称</th>
                            <th>商品价格</th>
                            <th>商品数量</th>
                            <th>商品属性</th>
                            <th>商品小计</th>
                        </tr>
                        <#list products as product>
                            <tr>
                                <td>${product.productName}</td>
                                <td>${product.productPrice?string("#.00")}元</td>
                                <td>${product.productNumber?string("#.##")}</td>
                                <td>${product.skuAttr}</td>
                                <td id="amount">${product.amount?string('0.00')}元</td>
                            </tr>
                        </#list>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>合计</td>
                            <td>${orderDerdetail.goodsAmount?string('0.00')}元</td>
                        </tr>
                    </table>
                </div>
                <div class="panel panel-default">
                    <form id="orderAction" class="form-inline" method="post" action="/orderinfo/changeOrderStatus">
                        <input type="hidden" name="id" value="${orderDerdetail.id}" />
                        <input type="hidden" name="state" value="" />
                        <table class="table">
                            <tr><th colspan="2" class="text-center info">操作信息</th></tr>
                            <tr>
                                <th class="text-right">操作备注:</th>
                                <td><textarea name="remark" rows="2" cols="70"></textarea></td>
                            </tr>
                            <tr>
                                <th>可执行操作</th>
                                <td>
                                    <#if orderDerdetail.orderStatus == 0>
                                        <button type="button" class="btn btn-success btn_action" value="1">确认</button>&nbsp;&nbsp;
                                        <button type="button" class="btn btn-success btn_action" value="2">取消</button>&nbsp;&nbsp;
                                        <button type="button" class="btn btn-success btn_action" value="3">无效</button>&nbsp;&nbsp;
                                    </#if>
                                    <#if orderDerdetail.orderStatus == 1 && orderDerdetail.payStatus == 1 && orderDerdetail.shippingStatus == 0>
                                        <button type="button" class="btn btn-success btn_action" value="4">发货</button>&nbsp;&nbsp;
                                        发货单号：<input type="text" name="deliverSn" id="deliverSn" value="${orderDerdetail.deliverSn!''}"/>
                                    </#if>
                                    <#if orderDerdetail.orderStatus == 1 && orderDerdetail.payStatus == 1 && orderDerdetail.shippingStatus == 1>
                                        <button type="button" class="btn btn-success btn_action" value="5">配送</button>&nbsp;&nbsp;
                                    </#if>
                                    <#if orderDerdetail.orderStatus == 1 && orderDerdetail.payStatus == 1 && orderDerdetail.shippingStatus == 2>
                                        <button type="button" class="btn btn-success btn_action" value="6">售后</button>&nbsp;&nbsp;
                                    </#if>
                                    <#if orderDerdetail.orderStatus == 3>
                                        订单已取消
                                    </#if>
                                    <#if orderDerdetail.orderStatus == 4>
                                        订单无效了
                                    </#if>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="panel panel-default">
                    <table class="table">
                        <tr><th colspan="6" class="text-center info">操作记录</th></tr>
                        <tr>
                            <th>操作者</th>
                            <th>操作时间</th>
                            <th>订单状态</th>
                            <th>付款状态</th>
                            <th>发货状态</th>
                            <th>备注</th>
                        </tr>
                        <#list orderActions as orderAction>
                            <tr>
                                <td>${orderAction.actionUser}</td>
                                <td>${(orderAction.actionTime?string('yyyy-MM-dd HH:mm:ss'))!""}</td>
                                <td>${orderAction.orderStatusDisplay}</td>
                                <td>${orderAction.payStatusDisplay}</td>
                                <td>${orderAction.shippingStatusDisplay}</td>
                                <td>${orderAction.actionNote}</td>
                            </tr>
                        </#list>
                    </table>
                </div>
			</div>
		</div>
        <!--购货人模态框-->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <form class="form-horizontal" id="editform" method="post" action="/orderinfo/orderInfoUpdate">
                            <fieldset>
                                <div id="legend" class="">
                                    <legend>收货人信息</legend>
                                </div>
                                <input type="hidden" name="id" value="" />
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="consignee">收货人</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" name="consignee"></input>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="province">所在省份</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" name="province"></input>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="city">所在城市</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" name="city"></input>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="district">所在地区</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" name="district"></input>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="address">具体地址</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" name="address"></input>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="zipcode">邮编</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" name="zipcode"></input>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="mobile">手机号</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" name="mobile"></input>
                                    </div>
                                </div>

                            </fieldset>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success btn_audit">保存</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="productModal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-body">
                        <form class="form-horizontal" id="productEditform" method="post" action="/orderinfo/productUpdate">
                            <fieldset>
                                <div id="legend" class="">
                                    <legend>商品信息</legend>
                                </div>
                                <input type="hidden" name="id" value=""/>
                                <div>
                                    <table class="table">
                                        <tr>
                                            <th>商品名称</th>
                                            <th>价格</th>
                                            <th>数量</th>
                                            <th>小计</th>
                                        </tr>
                                        <tbody id="edit_body">
                                        <#list products as vo>
                                        <tr>
                                            <input type="hidden" name="orderProducts[${vo_index}].id" value="${vo.id}"
                                                   tag="id"/>
                                            <td>${vo.productName}</td>
                                            <td><input type="text" id="price${vo_index}" tag=productPrice
                                                       name="orderProducts[${vo_index}].productPrice"
                                                       value="${vo.productPrice?string("#.00")}" style="width:100px"/></td>
                                            <td><input type="text" id="number${vo_index}" tag=productNumber
                                                       name="orderProducts[${vo_index}].productNumber"
                                                       value="${vo.productNumber?string("#.##")}" style="width:100px"/></td>
                                            <#--<td>${vo.skuAttr}</td>-->
                                            <td><span tag="amount">${vo.amount?string("#.00")}</span></td>
                                        </tr>
                                        </#list>
                                        </tbody>
                                        <tr>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td>总计:</td>
                                            <td><span id="total"></span></td>
                                        </tr>
                                    </table>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success btn_audit_product" value="1">更新</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>

                </div>
            </div>
        </div>

    </div>
</body>
</html>